<template>
	<view class="content">
		<u-subsection :list="list" :current="current" mode="subsection" @change="changeCurrent" fontSize="16"></u-subsection>
		<view class="" v-if="current == 0">
			<view class="orders_commission">
				<view class="commission_card">
					<view class="card_title">
						<view class="money_text">可提现金额（元）</view>
						<view @click="change_eyesC" class="change_eyes">
							<view v-if="change_eyes">
								<image src="../../static/img/sure.png"></image>
							</view>
							<view v-else>
								<image src="../../static/img/none.png"></image>
							</view>
						</view>
					</view>
					<view class="card_money">
						<view v-if="change_eyes">666</view>
						<view v-else>******</view>
					</view>
					<view class="capital_detailed">
						<view @click="to_capital_detailed">收支明细</view>
					</view>
					<view class="money_type">
						<view class="confirm_money">
							<view>客户确认中（元）</view>
							<view v-if="change_eyes">666</view>
							<view v-else>******</view>
						</view>
						<view class="complete_money">
							<view>提现已完成（元）</view>
							<view v-if="change_eyes">666</view>
							<view v-else>******</view>
						</view>
					</view>
				</view>
				<view class="to_btn">
					<view @click="to_withdrawal">去提现</view>
				</view>
			</view>
		</view>
		<view class="" v-if="current == 1">
			<view class="bankcard">
				<view class="bankcard_content" :style="{backgroundImage:bank_url}">
					<view class="bankcard_content_top" v-if="is_bind">
						<view class="bankcard_logo">
							<image :src="logo_src"></image>
						</view>
						<view class="bankcard_msg">
							<view>{{ bank_name }}</view>
							<view>{{ bank_type }}</view>
						</view>
					</view>
					<view class="bankcard_content_bottom" v-if="is_bind">
						<view>**** **** **** {{ bank_no }}</view>
					</view>
				</view>
				<view class="bankcard_btn">
					<view v-if="!is_bank" @click="to_binding">去绑卡</view>
					<view v-if="is_bank" @click="to_binding">修改</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import { toast, clearStorageSync, setStorageSync, getStorageSync, useRouter } from '@/utils/utils.js';
export default {
	data() {
		return {
			list: ['订单佣金', '我的银行卡'],
			current: 0,
			change_eyes:false,
			// bank_url:'url(https://www.bjroyalkitchen.com/images/root/20210427001.png)',
			bank_url:'url("")',
			is_bind:true,
			is_bank:true,
			logo_src:'https://zhengxin-pub.cdn.bcebos.com/logopic/03569bd0590e18d45aecf156c33440cb_fullsize.jpg',
			bank_name:'2312',
			bank_type:'2313123',
			bank_no:'112131',
		};
	},
	onLoad(op) {
		//this.id  = op.id
	},
	onShow() {},
	onReady() {
		this.getUserInfo();
	},
	methods: {
		getUserInfo() {},
		changeCurrent(e) {
			this.current = e;
			console.log(e);
		},
		to_capital_detailed(){
			uni.navigateTo({
				url:'/pagesIndex/capital_details/capital_details'
			})
		},
		to_withdrawal(){
			uni.navigateTo({
				url:'/pagesIndex/withdrawal/withdrawal',
				// url:'/pagesIndex/upload_card/upload_card'
			})
		},
		change_eyesC(){
			this.change_eyes = !this.change_eyes
		},
		to_binding(){
			uni.navigateTo({
				url:"/pagesIndex/bind_card/bind_card"
			})
		}
	}
};
</script>
<style lang="scss" scoped>
	::v-deep .u-subsection__bar{
		background-color:#3f51b5 !important;
	}
	::v-deep .u-subsection__item{
		border-color:#3f51b5 !important;
	}
page {
	background: #f2f2f2;
}
.orders_commission{
  width: 702rpx;
  margin-top: 20rpx;
  margin-left: auto;
  margin-right: auto;
}
.commission_card{
  width: 702rpx;
  height: 352rpx;
  border-radius: 25rpx;
  background-image: url(https://www.bjroyalkitchen.com/images/root/20210511001.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-shadow: 0rpx 6rpx 6rpx rgba(75, 85, 174, .5);
}
.card_title{
  width: 90%;
  height: 100rpx;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
}
.money_text{
  width: 85%;
  font-size: 26rpx;
  text-align: left;
  line-height: 100rpx;
  color: white;
  height: 100%;
}
.change_eyes{
  width: 15%;
  height: 100%;
}
.change_eyes view{
  width: 75rpx;
  height: 100rpx;
  position: absolute;
}
.change_eyes view image{
  width: 70rpx;
  height: 70rpx;
  margin-top: 12.5rpx;
}
.card_money{
  width: 100%;
  height: 100rpx;
}
.capital_detailed{
  width: 100%;
  height: 30rpx;
}
.capital_detailed view{
  width: 100rpx;
  height: 30rpx;
  font-size: 20rpx;
  color: #a2a2a2;
  line-height: 30rpx;
  text-align: center;
  float: right;
  background-color: #f2f2f2;
  border-radius: 50rpx 0 0 50rpx;
}
.card_money view{
  width: 70%;
  height: 100%;
  margin: 0 auto;
  font-size: 46rpx;
  color: white;
  line-height: 100rpx;
  text-align: center;
}
.money_type{
  width: 90%;
  height: 122rpx;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
}
.confirm_money,.complete_money{
  width: 50%;
  height: 100%;
}
.confirm_money view,.complete_money view{
  width: 100%;
  height: 50%;
  font-size: 25rpx;
  color: white;
  text-align: left;
}
.confirm_money view:nth-child(1),.complete_money view:nth-child(1){
  line-height: 85rpx;
}
.confirm_money view:nth-child(2),.complete_money view:nth-child(2){
  line-height: 35rpx;
}
.to_btn{
  width: 100%;
  height: 80rpx;
  margin-top: 150rpx;
}
.to_btn view{
  width: 40%;
  height: 80rpx;
  margin: 0 auto;
  background-color: #3057be;
  color: white;
  line-height: 80rpx;
  text-align: center;
  letter-spacing: 2rpx;
  border-radius: 50rpx;
  box-shadow: 0 10rpx 20rpx rgba(75, 85, 174, .27);
}

.bankcard{
  width: 100%;
  // height: 500rpx;
  .bankcard_content{
    width: 95%;
    height: 340rpx;
    margin-top: 20rpx;
    margin-left: auto;
    margin-right: auto;
    background-repeat: no-repeat;
    background-size: 100% 100%;
	 .bankcard_content_top{
	   width: 90%;
	   height: 140rpx;
	   margin: 0 auto;
	   display: flex;
	   flex-direction: row;
		.bankcard_logo{
		  width: 100rpx;
		  height: 100%;
		  image{
		    width: 80rpx;
		    height: 80rpx;
		    margin-top: 30rpx;
		  }
		}
		.bankcard_msg{
		  width: 60%;
		  height: 100%;
		  view:nth-child(1){
		    width: 100%;
		    height: 100rpx;
		    font-size: 28rpx;
		    color: #ffffff;
		    text-align: left;
		    line-height: 140rpx;
		  }
		  view:nth-child(2){
		    width: 100%;
		    height: 40rpx;
		    font-size: 18rpx;
		    color: #f2f2f2;
		    text-align: left;
		    line-height: 20rpx;
		  }
		}
	 }
	 .bankcard_content_bottom{
	   width: 70%;
	   height: 140rpx;
	   margin: 0 auto;
		view{
		  width: 100%;
		  height: 100%;
		  font-size: 26rpx;
		  color: #ffffff;
		  text-align: center;
		  line-height: 200rpx;
		}
	 }
  }
  .bankcard_btn{
    width: 100%;
    height: 80rpx;
    margin-top: 120rpx;
	 view{
	   width: 80%;
	   height: 80rpx;
	   margin: 0 auto;
	   background-color: #3057be;
	   color: white;
	   line-height: 80rpx;
	   text-align: center;
	   letter-spacing: 2rpx;
	   border-radius: 50rpx;
	   box-shadow: 0 10rpx 20rpx rgba(75, 85, 174, .27);
	 }
  }
}

::v-deep .u-subsection__bar {
	height: 50px !important;
}
::v-deep .u-subsection {
	height: 50px !important;
}

@media (min-width: 768px) {
	::v-deep .u-subsection__item__text {
		font-size: 18rpx !important;
		line-height: 18rpx !important;
	}
	::v-deep .u-subsection {
		height: 80rpx !important;
	}
	::v-deep .u-subsection__bar {
		height: 80rpx !important;
	}
	.to_btn view {
		font-size: 20rpx;
	}
	.bankcard_btn view {
		font-size: 20rpx;
	}
}
</style>
